<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>威胁情报中心-情报源管理</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" onerror="this.onerror=null;this.href='local-scripts/font-awesome-fallback.css';console.log('使用本地Font Awesome替代样式');">
  <!-- 本地Font Awesome替代方案（备用） -->
  <noscript><link href="local-scripts/font-awesome-fallback.css" rel="stylesheet"></noscript>
  
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js" onerror="this.onerror=null;console.log('Chart.js CDN加载失败，使用本地替代');"></script>
  <!-- Chart.js本地替代方案 -->
  <script src="local-scripts/chart-fallback.js"></script>
  <script>
    // 确保Chart对象存在
    window.Chart = window.Chart || {};
  </script>
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <!-- 确保在DOM加载前Chart已定义 -->
  <script>
    if (typeof Chart === 'undefined') {
      console.warn('Chart未定义，使用默认空对象');
      window.Chart = function(ctx, config) {
        this.ctx = ctx;
        this.config = config;
        // 简单实现，避免错误
        this.update = function() {};
        this.destroy = function() {};
      };
      Chart.register = function() {};
    }
  </script>
  <!-- 主要容器 -->
  <div class="flex flex-col min-h-screen">
    <!-- 顶部搜索和筛选区域 -->
    <header class="bg-white border-b border-gray-200 py-3 px-4 shadow-sm">
      <div class="container mx-auto">
        <div class="flex items-center justify-between">
          <h1 class="text-xl font-bold text-gray-800">威胁情报中心-情报源管理</h1>
          <div class="flex items-center space-x-4">
            <div class="relative">
              <input type="text" placeholder="搜索情报源或专题..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 w-64">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-1 container mx-auto p-4">
      <div class="flex flex-col lg:flex-row gap-4">
        <!-- 左侧导航区域 -->
        <aside class="lg:w-64 w-full">
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <h2 class="text-lg font-semibold mb-3">导航菜单</h2>
            <nav>
              <ul class="space-y-1">
                <li><a href="#" class="block px-3 py-2 rounded-lg bg-blue-50 text-blue-600 font-medium">情报源管理</a></li>
                <li><a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100">质量评估配置</a></li>
                <li><a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100">专题管理</a></li>
                <li><a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100">AI解读</a></li>
                <li><a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100">报告导出</a></li>
              </ul>
            </nav>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <h2 class="text-lg font-semibold mb-3">专题列表</h2>
            <div class="space-y-2">
              <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                <span class="text-sm font-medium">APT29活动监控</span>
                <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">3个新</span>
              </div>
              <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                <span class="text-sm font-medium">勒索软件趋势</span>
                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">活跃</span>
              </div>
              <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                <span class="text-sm font-medium">供应链攻击</span>
                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">待更新</span>
              </div>
              <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                <span class="text-sm font-medium">DDoS攻击态势</span>
                <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">正常</span>
              </div>
            </div>
            <button class="w-full mt-3 text-sm text-blue-500 hover:text-blue-600">
              <i class="fa fa-plus-circle mr-1"></i>添加专题
            </button>
            </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex justify-between items-center mb-3">
              <h2 class="text-lg font-semibold">最近情报动态</h2>
              <div class="flex items-center space-x-3">
                <button class="text-sm text-blue-500 hover:text-blue-600">查看全部</button>
              </div>
            </div>
            <div class="timeline-container relative pl-4 min-h-[150px]">
              <!-- 时间轴将通过JavaScript动态生成 -->
            </div>
          </div>
        </aside>

        <!-- 中间主工作区 -->
        <section class="flex-1">
          <!-- 主要内容将在这里动态生成 -->
          <div id="content-area">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
              <h2 class="text-lg font-semibold mb-3">情报源概览</h2>
              <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px] bg-blue-50 rounded-lg p-4">
                  <p class="text-gray-600 text-sm">总情报源</p>
                  <p class="text-2xl font-bold text-blue-600">42</p>
                </div>
                <div class="flex-1 min-w-[200px] bg-green-50 rounded-lg p-4">
                  <p class="text-gray-600 text-sm">优质情报源</p>
                  <p class="text-2xl font-bold text-green-600">18</p>
                </div>
                <div class="flex-1 min-w-[200px] bg-yellow-50 rounded-lg p-4">
                  <p class="text-gray-600 text-sm">需关注情报源</p>
                  <p class="text-2xl font-bold text-yellow-600">6</p>
                </div>
                <div class="flex-1 min-w-[200px] bg-red-50 rounded-lg p-4">
                  <p class="text-gray-600 text-sm">最近更新</p>
                  <p class="text-2xl font-bold text-red-600">30分钟前</p>
                </div>
              </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
              <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold">情报源列表</h2>
                <div class="flex items-center space-x-2">
                  <select class="border border-gray-300 rounded-lg px-3 py-1 text-sm">
                    <option>按质量评分排序</option>
                    <option>按更新时间排序</option>
                    <option>按类型排序</option>
                  </select>
                  <button class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-refresh"></i>
                  </button>
                </div>
              </div>
              
              <!-- 情报源卡片容器 -->
              <div id="intelligence-sources" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 情报源卡片将由JavaScript动态生成 -->
              </div>
            </div>
          </div>
        </section>

        <!-- 右侧统计和快速操作面板 -->
        <aside class="lg:w-72 w-full">
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <h2 class="text-lg font-semibold mb-3">快速操作</h2>
            <div class="grid grid-cols-2 gap-2">
              <button class="bg-blue-50 hover:bg-blue-100 text-blue-600 p-3 rounded-lg text-center transition-colors duration-300">
                <i class="fa fa-plus-circle text-xl mb-1"></i>
                <p class="text-sm">新建情报源</p>
              </button>
              <button id="export-data-btn" class="bg-green-50 hover:bg-green-100 text-green-600 p-3 rounded-lg text-center transition-colors duration-300">
                <i class="fa fa-download text-xl mb-1"></i>
                <p class="text-sm">导出数据</p>
              </button>
              <button id="add-topic-btn" class="bg-yellow-50 hover:bg-yellow-100 text-yellow-600 p-3 rounded-lg text-center transition-colors duration-300">
                <i class="fa fa-bookmark text-xl mb-1"></i>
                <p class="text-sm">添加专题</p>
              </button>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <h2 class="text-lg font-semibold mb-3">质量分布</h2>
            <div class="h-64">
              <canvas id="qualityChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
              <h2 class="text-lg font-semibold">质量评估概览</h2>
              <div class="flex items-center space-x-3">
                <button class="text-sm text-blue-500 hover:text-blue-600">配置</button>
                <button class="text-sm text-gray-500 hover:text-gray-600">导出</button>
              </div>
            </div>
            <div class="h-64">
              <canvas id="quality-radar-chart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
              <h2 class="text-lg font-semibold">专题增长趋势</h2>
              <div class="flex items-center space-x-3">
                <select class="text-sm border-none bg-transparent text-gray-500 focus:outline-none">
                  <option>近6个月</option>
                  <option>近1年</option>
                  <option>全部时间</option>
                </select>
              </div>
            </div>
            <div class="h-64">
              <canvas id="trend-line-chart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
              <h2 class="text-lg font-semibold">情报类别分布</h2>
              <div class="flex items-center space-x-3">
                <button class="text-sm text-blue-500 hover:text-blue-600">详情</button>
              </div>
            </div>
            <div class="h-64">
              <canvas id="category-pie-chart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <h2 class="text-lg font-semibold mb-3">实时更新</h2>
            <div class="space-y-3">
              <div class="flex items-center text-sm">
                <span class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                <span class="text-gray-700">Dark Web情报源更新</span>
                <span class="ml-auto text-gray-500">2分钟前</span>
              </div>
              <div class="flex items-center text-sm">
                <span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
                <span class="text-gray-700">APT专题新增情报</span>
                <span class="ml-auto text-gray-500">5分钟前</span>
              </div>
              <div class="flex items-center text-sm">
                <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
                <span class="text-gray-700">某情报源评分下降</span>
                <span class="ml-auto text-gray-500">15分钟前</span>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </main>
  </div>

  <!-- JavaScript -->
  <script src="data.js"></script>
    <script src="visualization.js"></script>
    <script src="script.js"></script>
  <!-- 编辑情报源模态框 -->
  <div id="edit-source-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
      <div class="p-5 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-800">编辑情报源</h3>
          <button id="close-edit-modal" class="text-gray-400 hover:text-gray-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
      <div class="p-5">
        <form id="edit-source-form">
          <input type="hidden" id="edit-source-id">
          <div class="mb-4">
            <label for="edit-source-name" class="block text-sm font-medium text-gray-700 mb-1">情报源名称 <span class="text-red-500">*</span></label>
            <input type="text" id="edit-source-name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="输入情报源名称" required>
          </div>
          <div class="mb-4">
            <label for="edit-source-type" class="block text-sm font-medium text-gray-700 mb-1">情报源类型 <span class="text-red-500">*</span></label>
            <select id="edit-source-type" name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" required>
              <option value="暗网情报">暗网情报</option>
              <option value="威胁组织">威胁组织</option>
              <option value="漏洞数据库">漏洞数据库</option>
              <option value="恶意软件">恶意软件</option>
              <option value="共享情报">共享情报</option>
              <option value="动态分析">动态分析</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="mb-4">
            <label for="edit-source-frequency" class="block text-sm font-medium text-gray-700 mb-1">更新频率</label>
            <select id="edit-source-frequency" name="updateFrequency" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
              <option value="实时">实时</option>
              <option value="每日">每日</option>
              <option value="每周">每周</option>
              <option value="每月">每月</option>
            </select>
          </div>
          <div class="mb-4">
            <label for="edit-source-coverage" class="block text-sm font-medium text-gray-700 mb-1">覆盖范围</label>
            <input type="text" id="edit-source-coverage" name="coverage" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="输入覆盖范围">
          </div>
          <div class="mb-4">
            <label for="edit-source-reliability" class="block text-sm font-medium text-gray-700 mb-1">可靠性</label>
            <select id="edit-source-reliability" name="reliability" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
              <option value="极高">极高</option>
              <option value="高">高</option>
              <option value="中高">中高</option>
              <option value="中">中</option>
              <option value="低">低</option>
            </select>
          </div>
          <div class="flex justify-end space-x-3 mt-6">
            <button type="button" id="cancel-edit-source" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">取消</button>
            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">保存更改</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 添加专题模态框 -->
  <div id="add-topic-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
      <div class="p-5 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-800">添加新专题</h3>
          <button id="close-topic-modal" class="text-gray-400 hover:text-gray-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
      <div class="p-5">
        <form id="add-topic-form">
          <div class="mb-4">
            <label for="topic-name" class="block text-sm font-medium text-gray-700 mb-1">专题名称 <span class="text-red-500">*</span></label>
            <input type="text" id="topic-name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="输入专题名称" required>
          </div>
          <div class="mb-4">
            <label for="topic-description" class="block text-sm font-medium text-gray-700 mb-1">专题描述</label>
            <textarea id="topic-description" name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="输入专题描述"></textarea>
          </div>
          <div class="mb-4">
            <label for="topic-status" class="block text-sm font-medium text-gray-700 mb-1">专题状态</label>
            <select id="topic-status" name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
              <option value="active">活跃</option>
              <option value="pending">待更新</option>
              <option value="inactive">不活跃</option>
            </select>
          </div>
          <div class="mb-4">
            <label for="topic-frequency" class="block text-sm font-medium text-gray-700 mb-1">推送频率</label>
            <select id="topic-frequency" name="pushFrequency" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
              <option value="实时">实时</option>
              <option value="每日">每日</option>
              <option value="每周">每周</option>
              <option value="每月">每月</option>
            </select>
          </div>
          <div class="mb-4">
            <label for="topic-keywords" class="block text-sm font-medium text-gray-700 mb-1">关键词（用逗号分隔）</label>
            <input type="text" id="topic-keywords" name="keywords" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="输入关键词，多个关键词用逗号分隔">
          </div>
          <div class="flex justify-end space-x-3 mt-6">
            <button type="button" id="cancel-add-topic" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">取消</button>
            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">确认添加</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  </body>
</html>